<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title>广告屏蔽</title>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .wrap{
            position: absolute;
            top: 0;
            left: 0;
            height: 100%;
            width: 100%;
            background: rgb(246, 246, 246);
        }
        .flex{
            display: flex;
        }
        .flex-j-c{
            justify-content: center;
        }
        .flex-a-c{
            align-items: center;
        }
        .header{
            margin-top: 21rem;
            flex-direction: column;
        }
        .tilte{
            color: #8D8D8D;
            font-size: 11rem;
        }
        .num{
            margin-top: 12rem;
            color: #2C79D6;
            font-size: 28.46rem;
        }
        .operation{
            margin-top: 25rem;
            background: #ffffff;
            padding: 13.5rem 13rem 15.5rem 15rem;
            justify-content: space-between;
        }
        .shoud{
            color: #353535;
            font-size: 15rem;
        }
        .switch {
            width: 57px;
            height: 28px;
            position: relative;
            border: 1px solid #dfdfdf;
            background-color: #fdfdfd;
            box-shadow: #dfdfdf 0 0 0 0 inset;
            border-radius: 20px;
            background-clip: content-box;
            display: inline-block;
            -webkit-appearance: none;
            user-select: none;
            outline: none;
        }
        .switch:before {
            content: '';
            width: 26px;
            height: 26px;
            position: absolute;
            top: 0;
            left: 0;
            border-radius: 20px;
            background-color: #fff;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
        }
        .switch:checked {
            border-color: #2C79D6;
            box-shadow: #2C79D6 0 0 0 16px inset;
            background-color: #2C79D6;
        }
        .switch:checked:before {
            left: 30px;
        }
        .switch.switch-anim {
            transition: border cubic-bezier(0, 0, 0, 1) 0.4s, box-shadow cubic-bezier(0, 0, 0, 1) 0.4s;
        }
        .switch.switch-anim:before {
            transition: left 0.3s;
        }
        .switch.switch-anim:checked {
            box-shadow: #2C79D6 0 0 0 16px inset;
            background-color: #2C79D6;
            transition: border ease 0.4s, box-shadow ease 0.4s, background-color ease 1.2s;
        }
        .switch.switch-anim:checked:before {
            transition: left 0.3s;
        }
    </style>
    <script>
        !function(n){
            var  e=n.document,
            t=e.documentElement,
            i=37500,
            d=i/100,
            o="orientationchange"in n?"orientationchange":"resize",
            a=function(){
                var n=t.clientWidth||320;n>720&&(n=720);
                t.style.fontSize=n/d+"px"
            };
            e.addEventListener&&(n.addEventListener(o,a,!1),e.addEventListener("DOMContentLoaded",a,!1))
        }(window);
    </script>
</head>
<body>
    <div class="wrap" id="app">
        <div class="flex flex-a-c header">
            <div class="tilte">累计为您自动过滤广告</div>
            <div class="num">{{list.count}}</div>
        </div>
        <div class="flex flex-a-c operation">
            <div>
                <div class="shoud">手动屏蔽广告</div>
                <div class="tilte">长按网页广告后选择【屏蔽广告】即可</div>
            </div>
            <div>
                <input class="switch switch-anim" type="checkbox" checked @click="getOn" v-model="ishow">
            </div>
        </div>
    </div>
</body>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script>
    new Vue({
        el: '#app',
        data() {
            return  {
                ishow:false,
                list:{}
            }
            
        },
        mounted(){
            var that  = this
            $.ajax({
                //请求方式
                type : "GET",
                //请求的媒体类型
                contentType: "application/json;charset=UTF-8",
                //请求地址
                url : "http://app.aebrowser.cn/api/v1.ads/getOn",
                dataType:'jsonp',
                //数据，json字符串
                data : {
                    token:'c6e57bd8-b6b7-4dfa-be6b-ea9e03b914c5'
                },
                //请求成功
                success : function(res) {
                    if(res.code=1){
                        that.list = res.data
                        if(res.data.is_on==0){
                            that.ishow = false
                        }else{
                            console.log(res.data.is_on)
                            that.ishow = true
                        }
                        
                    }
                }
            });
        },

        methods:{
            // 开关
            getOn(){
                var that = this
                
                console.log(that.ishow)
                if(that.ishow==true){
                    that.open(0)
                }else{
                    that.open(1)
                }
            },
            open(id){
                var that = this
                $.ajax({
                    //请求方式
                    type : "GET",
                    //请求的媒体类型
                    contentType: "application/json;charset=UTF-8",
                    //请求地址
                    url : "http://app.aebrowser.cn/api/v1.ads/on",
                    dataType:'jsonp',
                    //数据，json字符串
                    data : {
                        token:'c6e57bd8-b6b7-4dfa-be6b-ea9e03b914c5',
                        on:id
                    },
                    //请求成功
                    success : function(res) {
                        if(res.code==1){
                            if(that.ishow==true){
                                that.ishow=true
                            }else{
                                that.ishow=false
                            }
                            
                        }
                    }
                });
            }
        }
    })
</script>
</html>